<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    ul {
      width: 100%;

      /* justify-content: space-evenly; */
      margin: 0;
      padding: 0;
      margin: 100px auto;
    }

    ul li {
      width: 200px;
      height: 385px;
      list-style: none;
      border: 1px solid #ccc;
      /* padding: 30px;
         */
      margin: 20px;
      box-shadow: 0px 0px 5px 0px #000;
      float: left;
    }
    p {
      display: block;
      width: 200px;
      height: 10px;
    }
    img {
      width: 200px;
      height: 160px;
    }
  </style>

  <body>
    <button id="jiage">根据价格排序</button>
    <button id="xs">根据销售排序</button>
    <button id="pj">根据评价排序</button>
    <ul id="list">
      <!-- <li>
            <img src="img/ip7.jpg" alt="">
            <p>iphone7 plugs</p>
            <p>颜色：土豪金</p>
            <p>原价：1000</p>
            <p>现价：￥9999</p>
            <p>销售：52</p>
            <p>评价:3535</p>
        </li> -->
    </ul>

    <script>
      var data = [
        {
          id: "001",
          name: "iphone7 plugs",
          imgurl: "img/ip7.jpg",
          price: 5899.0,
          sale: 5888.0,
          color: "土豪金",
          evaluate: 288,
          sales: 1230,
        },
        {
          id: "002",
          name: "Note7",
          imgurl: "img/note7.jpg",
          price: 3899.0,
          sale: 998.0,
          color: "黑色",
          evaluate: 289,
          sales: 439,
        },
        {
          id: "003",
          name: "荣耀7",
          imgurl: "img/honor7.jpg",
          price: 1999.0,
          sale: 1899.0,
          color: "白色",
          evaluate: 438,
          sales: 908,
        },
        {
          id: "004",
          name: "iphone7 plugs",
          imgurl: "img/ip7.jpg",
          price: 5999.0,
          sale: 5808.0,
          color: "土豪金",
          evaluate: 223,
          sales: 986,
        },
        {
          id: "005",
          name: "Note7",
          imgurl: "img/note7.jpg",
          price: 3892.0,
          sale: 998.0,
          color: "黑色",
          evaluate: 88,
          sales: 8798,
        },
        {
          id: "006",
          name: "荣耀7",
          imgurl: "img/honor7.jpg",
          price: 1929.0,
          sale: 1099.0,
          color: "白色",
          evaluate: 2088,
          sales: 453,
        },
        {
          id: "007",
          name: "iphone7 plugs",
          imgurl: "img/ip7.jpg",
          price: 4899.0,
          sale: 2888.0,
          color: "土豪金",
          evaluate: 2880,
          sales: 88,
        },
        {
          id: "008",
          name: "Note7",
          imgurl: "img/note7.jpg",
          price: 5876.0,
          sale: 998.0,
          color: "黑色",
          evaluate: 3288,
          sales: 99,
        },
        {
          id: "009",
          name: "荣耀7",
          imgurl: "img/honor7.jpg",
          price: 4999.0,
          sale: 1899.0,
          color: "白色",
          evaluate: 1288,
          sales: 645,
        },
        {
          id: "010",
          name: "iphone7 plugs",
          imgurl: "img/ip7.jpg",
          price: 5888.0,
          sale: 2899.0,
          color: "土豪金",
          evaluate: 2288,
          sales: 34,
        },
        {
          id: "011",
          name: "Note7",
          imgurl: "img/note7.jpg",
          price: 3299.0,
          sale: 978.0,
          color: "黑色",
          evaluate: 28,
          sales: 1213,
        },
        {
          id: "012",
          name: "荣耀7",
          imgurl: "img/honor7.jpg",
          price: 1976.0,
          sale: 1899.0,
          color: "白色",
          evaluate: 3243,
          sales: 123,
        },
      ];

      for (var i = 0; i < data.length; i++) {
        list.innerHTML +=
          " <li>" +
          '<img src="' +
          data[i].imgurl +
          '" alt="">' +
          "<p>" +
          data[i].name +
          "</p>" +
          "<p>" +
          data[i].color +
          "</p>" +
          "<p>" +
          data[i].price +
          "</p>" +
          "<p>" +
          data[i].sale +
          "</p>" +
          "<p>销售：" +
          data[i].evaluate +
          "</p>" +
          "<p>评价:" +
          data[i].sales +
          "</p>" +
          "</li>";
      }

      ///价格排序
      jiage.onclick = function () {
        data.sort(function (a, b) {
          return b.price - a.price;
        });
        list.innerHTML = "";

        for (var i = 0; i < data.length; i++) {
          list.innerHTML +=
            " <li>" +
            '<img src="' +
            data[i].imgurl +
            '" alt="">' +
            "<p>" +
            data[i].name +
            "</p>" +
            "<p>" +
            data[i].color +
            "</p>" +
            "<p>" +
            data[i].price +
            "</p>" +
            "<p>" +
            data[i].sale +
            "</p>" +
            "<p>销售：" +
            data[i].evaluate +
            "</p>" +
            "<p>评价:" +
            data[i].sales +
            "</p>" +
            "</li>";
        }
      };

      //销售排序
      xs.onclick = function () {
        data.sort(function (a, b) {
          return b.evaluate - a.evaluate;
        });
        list.innerHTML = "";

        for (var i = 0; i < data.length; i++) {
          list.innerHTML +=
            " <li>" +
            '<img src="' +
            data[i].imgurl +
            '" alt="">' +
            "<p>" +
            data[i].name +
            "</p>" +
            "<p>" +
            data[i].color +
            "</p>" +
            "<p>" +
            data[i].price +
            "</p>" +
            "<p>" +
            data[i].sale +
            "</p>" +
            "<p>销售：" +
            data[i].evaluate +
            "</p>" +
            "<p>评价:" +
            data[i].sales +
            "</p>" +
            "</li>";
        }
      };
      // 评价排序
      pj.onclick = function () {
        data.sort(function (a, b) {
          return b.sales - a.sales;
        });
        list.innerHTML = "";

        for (var i = 0; i < data.length; i++) {
          list.innerHTML +=
            " <li>" +
            '<img src="' +
            data[i].imgurl +
            '" alt="">' +
            "<p>" +
            data[i].name +
            "</p>" +
            "<p>" +
            data[i].color +
            "</p>" +
            "<p>" +
            data[i].price +
            "</p>" +
            "<p>" +
            data[i].sale +
            "</p>" +
            "<p>销售：" +
            data[i].evaluate +
            "</p>" +
            "<p>评价:" +
            data[i].sales +
            "</p>" +
            "</li>";
        }
      };
    </script>
  </body>
</html>
